<script setup lang="ts">
import { ref } from 'vue'
import { Refresh, Search, Plus } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { enterpriseDelete, enterpriseList, enterpriseSave } from '@/api/interface/web/enterprise'
import FormEnterprise from '@/components/form/FormEnterprise.vue'

const fullscreenLoading = ref(false)

const typeOptions = ref([
  {
    label: '企业',
    value: '1',
  },
  {
    label: '个人',
    value: '0',
  },
])

const baseTableRef = ref()

const searchForm = ref<any>({})

const conditionMethod = () => {
  const cond: any = {}
  Object.keys(searchForm.value).map((key) => {
    if (searchForm.value[key] || searchForm.value[key] === 0) {
      cond[key] = searchForm.value[key]
    }
  })
  return cond
}

const handleSearch = () => {
  baseTableRef.value.refresh()
}

const handleResetSearch = () => {
  searchForm.value = {}
  baseTableRef.value.refresh()
}

const dialogFormVisible = ref(false)
const addEditData = ref<any>(null)
const addEditStatus = ref('add')
const roleFormRef = ref()

const handleAdd = () => {
  dialogFormVisible.value = true
  addEditData.value = null
  addEditStatus.value = 'add'
}

const handleEdit = (row: any) => {
  dialogFormVisible.value = true
  addEditData.value = row
  addEditStatus.value = 'edit'
}

const handleDialogFormSubmit = () => {
  roleFormRef.value.submitForm().then((data: any) => {
    if (data) {
      fullscreenLoading.value = true
      if (addEditStatus.value === 'add') {
        enterpriseSave(data)
          .then(() => {
            dialogFormVisible.value = false
            ElMessage({
              type: 'success',
              message: '新增成功',
            })
            baseTableRef.value.refresh()
          })
          .finally(() => {
            fullscreenLoading.value = false
          })
      } else {
        enterpriseSave(data)
          .then(() => {
            dialogFormVisible.value = false
            ElMessage({
              type: 'success',
              message: '更新成功',
            })
            baseTableRef.value.refreshStay()
          })
          .finally(() => {
            fullscreenLoading.value = false
          })
      }
    }
  })
}

const handleDialogFormClose = () => {
  dialogFormVisible.value = false
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定删除角色?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    autofocus: false,
  }).then(() => {
    fullscreenLoading.value = true
    const { id } = row
    enterpriseDelete({ id })
      .then(() => {
        ElMessage({
          message: '删除成功!',
          type: 'success',
        })
        baseTableRef.value.refreshStay()
      })
      .finally(() => {
        fullscreenLoading.value = false
      })
  })
}
</script>

<template>
  <BasePageWrapper v-loading.fullscreen="fullscreenLoading">
    <BasePage>
      <template #title>企业管理</template>
      <template #toolbar>
        <el-button type="primary" @click="handleAdd">
          <template #icon>
            <el-icon><Plus /></el-icon>
          </template>
          新增
        </el-button>
      </template>
      <template #searchbar>
        <el-form :inline="true" :model="searchForm" @submit.prevent>
          <el-form-item label="企业名称：">
            <el-input v-model="searchForm.name" placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="企业类型：" style="width: 250px">
            <el-select v-model="searchForm.type" placeholder="请选择企业类型" style="width: 100%">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="info" text bg @click="handleResetSearch">
              <template #icon>
                <el-icon><Refresh /></el-icon>
              </template>
              重置
            </el-button>
            <el-button type="primary" @click="handleSearch">
              <template #icon>
                <el-icon><Search /></el-icon>
              </template>
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </template>

      <BaseTable
        ref="baseTableRef"
        :init-table-method="enterpriseList"
        :condition-method="conditionMethod"
        storage-condition
      >
        <el-table-column prop="id" label="编号" width="180" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="企业名称"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="code" label="统一社会信用代码" width="200"></el-table-column>
        <el-table-column prop="userName" label="负责人" width="100"></el-table-column>
        <el-table-column prop="userPhone" label="负责人电话" width="120"></el-table-column>
        <el-table-column prop="type" label="企业类型" width="80">
          <template #default="scope">
            <div v-if="scope.row.type == '0'">个人</div>
            <div v-if="scope.row.type == '1'">企业</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="联系地址" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="210">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </BaseTable>
    </BasePage>
  </BasePageWrapper>
  <BaseDialog v-model="dialogFormVisible">
    <template #title>{{ addEditStatus === 'add' ? '新增' : '编辑' }}</template>
    <template #buttons>
      <el-button type="info" text bg @click="handleDialogFormClose">取消</el-button>
      <el-button type="primary" @click="handleDialogFormSubmit">确认</el-button>
    </template>
    <FormEnterprise ref="roleFormRef" :data="addEditData" :status="addEditStatus"></FormEnterprise>
  </BaseDialog>
</template>

<style lang="scss" scoped>
.icon-text-box {
  display: flex;
  justify-content: center;
  align-items: center;

  .icon-text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
    cursor: pointer;
    .icon {
      margin-right: 5px;
      font-size: 16px;
    }
    .text {
      width: unset;
    }
  }
  .icon-text:last-child {
    margin-right: 0;
  }
  .icon-text.info {
    color: var(--theme-color);
  }
  .icon-text.delete {
    color: #f56c6c;
  }
}
</style>
